import './App.css';
import React from 'react';

//导入组件
import MyHeader from './components/MyHeader';
import MySwipe from './components/MySwipe';
import MyEntry from './components/MyEntry';
import HomeBanner from './components/HomeBanner';
import MyTabBar from './components/MyTabBar';
import MySecKill from './components/MySecKill';
import MyProList from './components/MyProList';
import HomeNews from './components/HomeNews';

import CateInput from './components/CateInput';
import CateLeft from './components/CateLeft';


//react中创建组件的方式:
//方式一:函数式组件,内部没有this
// function App() {
//   // console.log(this);//undefine,所以无需研究this
//   return (
//     <div className="App">
//       <h1 className="title">demo</h1>
//     </div>
//   );
// }

// export default App;


//方式二:class组件,必须继承自React.Component
//class组件内部的this表示当前组件实例对象
//有组件状态,有生命周期函数
class App extends React.Component{
  render() {//负责组件的渲染(只要当前组件渲染一次,render方法必定会调用一次)
    return (
      // <div className="App">
      //   {/* 大括号内只可以写表达式,不能写js语句 */}
        // {/* 搜索框组件 */}
        // <MyHeader />
        // {/* 轮播图 */}
        // <MySwipe />
        // {/* 消息 */}
        // <HomeNews />
        // {/* 分类列表 */}
        // <MyEntry />
        // {/* 首页广告 */}
        // <HomeBanner />
        // {/* 底部导航 */}
        // <MyTabBar />
        // {/* 秒杀 */}
        // <MySecKill />
        // {/* 商品列表 */}
        // <MyProList />
      // </div>
      <div className="App">
        {/* 分类头部输入框 */}
        <CateInput />
        {/* 分类列表 */}
        <CateLeft/>

        {/* 底部导航 */}
        <MyTabBar />
      </div>
    );
  }
}

export default App;


//方式三:React.creatClass()

// React.creatClass()